<template>
  <div id="orderDetailPage">
    <OrderDetailPageHeader :orderDetail="orderDetail"></OrderDetailPageHeader>
    <OrderStepView
      v-show="orderDetail.status !== 5"
      :orderDetail="orderDetail"
    ></OrderStepView>

    <div class="submitOrderDiv">
      <div
        class="userButton"
        @click="showRatePopupView"
        v-show="showCommentButton"
      >
        去评价
      </div>
      <div
        class="userButton"
        @click="cancelOrder"
        v-show="showCancelOrderButton"
      >
        取消订单
      </div>
      <div class="userButton" @click="payOrder" v-show="showPayButton">
        确认付款
      </div>
      <div
        class="userButton"
        @click="masterCancelOrderButton"
        v-show="showMasterCancelOrderButton"
      >
        作废订单
      </div>
      <div class="button" v-show="showCompleteButton" @click="complete">
        确认维修
      </div>
      <div
        class="button"
        v-show="showDistributionOrderButton"
        @click="distributionOrder"
      >
        分配订单
      </div>
      <div
        class="button"
        v-show="showConfirmReceiptButton"
        @click="confirmReceipt"
      >
        确认收款
      </div>
    </div>

    <RatePopup
      v-bind:showRatePopup="showRatePopup"
      :closeRatePopup="closeRatePopupView"
      :submitSuccess="submitRateSuccess"
      :orderid="orderid"
    ></RatePopup>
    <van-action-sheet
      v-model="showActionSheet"
      :actions="actions"
      cancel-text="取消"
      @select="onSelect"
      @cancel="onCancel"
    />

    <ChangeMoneyPopup
      v-bind:showChangeMP="showChangeMP"
      :closeChangeMP="closeChangeMP"
      :getMoney="getMoney"
      :oldPrice="orderDetail.price"
    ></ChangeMoneyPopup>
    <CompleteOrderPopup
      v-bind:showCompleteOrderPopup="showCompleteOrderPopup"
      :closeCompleteOrderPopup="closeCompleteOrderPopup"
      :orderDetail="orderDetail"
      :submitWithImgUrl="submitWithImgUrl"
    ></CompleteOrderPopup>
    <router-view></router-view>
  </div>
</template>

<script>
import OrderDetailPageHeader from "./components/OrderDetailPageHeader";
import OrderStepView from "./components/OrderStepView";
import RatePopup from "./components/RatePopup";
import DistributionOrder from "./DistributionOrder";
import { api_orderDetail } from "@/service/api/repair";
import { Dialog, Toast } from "vant";
import { getStore } from "@/config/global";
import { mapState } from "vuex";
import ChangeMoneyPopup from "./components/ChangeMoneyPopup";
import CompleteOrderPopup from "./components/CompleteOrderPopup";
import {
  api_orderPriceChange,
  api_orderRepaired,
  api_orderConfirm
} from "@/service/api/repair";
export default {
  name: "OrderDetailPage",
  components: {
    OrderDetailPageHeader,
    OrderStepView,
    RatePopup,
    DistributionOrder,
    ChangeMoneyPopup,
    CompleteOrderPopup
  },
  data() {
    return {
      showRatePopup: false,
      showActionSheet: false,
      actions: [{ name: "线下支付" },{ name: "在线支付" ,disabled: true}],
      isMaster: this.$route.query.isMaster,
      orderid: this.$route.query.orderid,
      isDispatchOrder: this.$route.query.isDispatchOrder,
      orderDetail: null,
      showChangeMP: false,
      showCompleteOrderPopup: false
    };
  },
  methods: {
    closeRatePopupView() {
      this.showRatePopup = false;
    },
      submitRateSuccess(){
        this.requestData();
      },
    showRatePopupView() {
      this.showRatePopup = true;
    },
    cancelOrder() {
      this.$router.push({
        name: "cancelOrderPage",
        query: {
          orderid: this.orderid,
          isMaster:this.isMaster
        }
      });
    },
    payOrder() {
      this.showActionSheet = true;
    },
    complete() {

        this.$router.push({
            name:'masterEditRepair',query:{
                orderId: this.orderid
            }
        });

      // this.showCompleteOrderPopup = true;
    },

    distributionOrder() {
      // 分配订单
      // this.$router.push({path:"/dashboard/order/orderDetailPage"});

      this.$router.push({
        name: "distributionOrder",
        query: {
          orderid: this.orderid
        }
      });
    },

    confirmReceipt() {
      // 确认收款  api_orderConfirm

      Dialog.confirm({
        title: "温馨提示",
          message:"请确认用户是否线下支付？"
      })
        .then(() => {
            this.requestConfirmReceipt();
        })
        .catch(() => {});
    },
      requestConfirmReceipt(){
          api_orderConfirm(this.orderid).then((res)=>{
              this.requestData();
              this.$router.replace({
                  name:"resultPage",
                  query: {
                  title: "确认收款成功",
                      subTitle1:"",
                      subTitle2:""
              }});
          }).catch((error)=>{
              this.$toast(error.message);
          });
      },
    onSelect(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.showActionSheet = false;

      if (item.name == "线下支付") {
        Dialog.confirm({
          title: "温馨提示",
          message:
            "订单支付方式提交成功，请提醒维修师傅已线下支付，确认订单完成。",
          showCancelButton: false,
          confirmButtonText: "确定",
          messageAlign: "left"
        })
          .then(() => {})
          .catch(() => {});
      } else {
          Toast('在线支付暂未开通');

          // Toast(item.name);
      }
    },
    async requestData() {
      let res = await api_orderDetail(this.orderid);
      this.orderDetail = res.data;
    },
      masterCancelOrderButton() {

          this.$router.push({
              name: "cancelOrderPage",
              query: {
                  orderid: this.orderid,
                  isMaster:this.isMaster
              }
          });

    },
    closeChangeMP() {
      this.showChangeMP = false;
    },
    getMoney(value) {
      this.$toast.loading();

      var data = {
        orderId: this.orderDetail.id,
        price: value
      };
      api_orderPriceChange(data)
        .then(() => {
          this.$toast.clear();
          this.showChangeMP = false;
          this.requestData();
        })
        .catch(() => {
          this.$toast.clear();
        });
    },
    closeCompleteOrderPopup() {
      this.showCompleteOrderPopup = false;
    },
    submitWithImgUrl(imgUrls) {

      var data = {
        orderId: this.orderid
      };

      if (imgUrls !== "") {
        data["imgUrls"] = imgUrls;
      }

      console.log(data);
      api_orderRepaired(data)
        .then(() => {
          this.showCompleteOrderPopup = false;
          this.requestData();
        })
        .catch(error => {
          this.$toast(error.message);
        });
    }
  },
  created() {
    this.requestData();
  },
  computed: {
    ...mapState(["userInfo"]),

    // 是否显示取消订单按钮
    showCancelOrderButton() {
      if ((this.orderDetail.status === 1) && this.isMaster !== "true") {
        return true;
      }
      return false;
    },
    // 是否显示去评价按钮
    showCommentButton() {
      if (this.orderDetail.status === 4 && this.isMaster !== "true") {
        return true;
      }
      return false;
    },
    // 是否显示支付按钮
    showPayButton() {
      if (this.orderDetail.status === 3 && this.isMaster !== "true") {
        return true;
      }
      return false;
    },

    // 维修师傅 是否显示完成按钮  在处理中的状态时候 才显示完成
    showCompleteButton() {

        if (this.isDispatchOrder === 'true'){
            return false;
        }

        if (this.orderDetail.status === 2 && this.isMaster === "true") {
        return true;
      }
      return false;
    },

    // 维修师傅 是否显示确认收款按钮  在待支付的状态时候 才显示确认收款
    showConfirmReceiptButton() {
        if (this.isDispatchOrder === 'true'){
            return false;
        }

      if (this.orderDetail.status === 3 && this.isMaster === "true") {
        return true;
      }
      return false;
    },

    // 维修师傅 是否显示分配订单按钮  在处理中的状态时候 + 身份是工头  才显示
    showDistributionOrderButton() {
      if (
        this.orderDetail.status === 1 &&
        this.isMaster === "true" &&
        this.userInfo.role === "HEADMAN"
      ) {
        return true;
      }
      return false;
    },
      // 维修师傅是否显示作废订单按钮
      showMasterCancelOrderButton() {
        if (this.isDispatchOrder === 'true'){
            return false;
        }

        if (
        (this.orderDetail.status === 2) &&
        this.isMaster === "true"
      ) {
        return true;
      }
      return false;
    }
  }
};
</script>

<style scoped>
#orderDetailPage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  overflow: auto;
  background-color: #f6f8fb;
}

.submitOrderDiv {
  background-color: white;
  padding: 0 20px;
  width: 100%;
  height: 4.2666666666666666rem;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  overflow: auto;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

}
.button {
  width: 8rem;
  height: 2.6666666666666665rem;
  background: #397be6;
  border-radius: 1.6333333333333333rem;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  margin: 0 0.6rem;

}
.userButton {
  width: 8rem;
  height: 2.6666666666666665rem;
  background: white;
  border-radius: 1.6333333333333333rem;
  color: #121c32;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 1px solid #bfc3cd;

  margin: 0 0.6rem;

}
</style>